<template>
  <div class="pr-jurisdiction">
    <div class="tree-box">
      <el-tree ref="tree" :data="menuTree" show-checkbox default-expand-all node-key="id"  highlight-current :props="defaultProps" />
    </div>
    <div class="pr-jurisdiction-sumit">
      <el-button @click="deleteSAffirm(false)">取 消</el-button>
      <el-button type="primary" @click="saveTree()">确 定</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['row'],
    data() {
      return {
        deleteSVisible: false,

        defaultProps: {
          children: 'children',
          label: 'label'
        },


        menuTree: [],
      }
    },
    mounted: function() {
      // 获取选择菜单列表
      this.getSysMenuSelect();
      // 获取角色信息
      this.getSysRoleInfo();
    },
    methods: {
      // 获取角色信息
      getSysRoleInfo: function() {
        let params = this.row.roleId;
        this.$server.getSysRoleInfo(params).then(res => {
          let menuIdList = res.role.menuIdList;
          this.$refs.tree.setCheckedKeys(menuIdList)
           //  先清空选中状态
           this.$refs.tree.setCheckedKeys([])
       setTimeout(()=>{
        menuIdList.forEach(i => {
        	// 根据id 拿到 Tree 组件中的node的所有信息
              let node = this.$refs.tree.getNode(i);
              if(node){
                // node.isLeaf：判断当前节点是否为子节点
                if (node.isLeaf) {
                //如果是子节点，就把状态设置成选中
                  this.$refs.tree.setChecked(node, true);
                } else {

                }
              }

        })
     },1000)
            //functionIdList是设置选中的数据

        })
      },
      // 获取选择菜单列表
      getSysMenuSelect: function() {
        let params = {};
        this.$server.getSysMenuSelect(params).then(res => {
          let menuTree = this.parseTreeJson(res.menuTree);
          this.menuTree = menuTree;
        })
      },
      // 递归组装菜单树
      parseTreeJson: function(array) {
        let tempArr = [];
        for (let i = 0; i < array.length; i++) {
          let temp = {
            id: array[i].id,
            label: array[i].name,
          }
          if (array[i].childrens && typeof(array[i].childrens) == 'object') {
            temp.children = this.parseTreeJson(array[i].childrens)
          }
          tempArr.push(temp);
        }
        return tempArr;
      },
      // 保存菜单权限
      saveTree: function() {
        let menuIdList = this.$refs.tree.getCheckedKeys();
		  let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
		  let functionIdList = menuIdList.concat(hafCheckedKeys)
        let params = {
          roleId: this.row.roleId,
          menuIdList : functionIdList,
        };
        this.$server.updateSysRole(params).then(res => {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          // 关闭弹框
          this.$emit('chang');
        })
      },











      deleteSAffirm(e) {
        const val = {
          flag: e
        }
        this.$emit('chang', val)
      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes())
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys())
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }])
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3])
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pr-jurisdiction {
    &-sumit {
      margin-top: 20px;
    }
  }

  .tree-box {
    height: 50vh;
    overflow: auto;
  }
</style>
